<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.min.css">
</head>
<body>
	<form action="/admin/users" method="post">
		用户名：<input type="text" name="username" value="${user.username }">
		用户状态：
		<input type="radio" name="locked" value="0" ${user.locked==0?"checked":"" }>正常
		<input type="radio" name="locked" value="1" ${user.locked==1?"checked":"" }>锁定
		<input type="radio" name="locked" value="2" ${user.locked==2||user.locked==null?"checked":"" }>全部
		<input type="button"  onclick="query()" value="查询">
	</form>
	
	<table class="table">
		<tr>
			<td>序号</td>
			<td>用户名</td>
			<td>性别</td>
			<td>出生日期</td>
			<td>注册日期</td>
			<td>是否锁定</td>
		</tr>
		
		<c:forEach items="${info.list }" var="u" varStatus="i">
			<tr>
				<td>${i.count }</td>
				<td>${u.username }</td>
				<td>${u.gender==0?"女":"男" }</td>
				<td><fmt:formatDate value="${u.birthday }" pattern="yyyy-MM-dd"/> </td>
				<td><fmt:formatDate value="${u.created }" pattern="yyyy-MM-dd"/> </td>
				<c:if test="${u.locked==0}">
					<td><input type="button" value="正常"  class="btn btn-success" onclick="updateLocked('${u.id}',this)"></td>
				</c:if>
				<c:if test="${u.locked==1}">
					<td><input type="button" value="锁定"  class="btn btn-danger" onclick="updateLocked('${u.id}',this)"></td>
				</c:if>
				
				
			</tr>
		</c:forEach>
		<tr>
			<td colspan="6"><jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include></td>
		</tr>
	</table>
	
</body>
<script type="text/javascript">
	function goPage(pageNum){
		//获取form表单中搜索的条件数据
		var data = $("form").serialize();
		
		//在分页参数上，拼接上选中的状态码
		/* location="/admin/users?pageNum="+pageNum + "&"+ data; */
		
		$("#center").load("/admin/users?pageNum="+pageNum + "&"+ data);
	}
	
	//更新是否锁定的状态
	function updateLocked(id,obj){
		//先获取要更新成的status值	
		var locked = (obj.value=="锁定"?0:1);
		
		//使用ajax修改数据
		$.post(
			"/admin/updateUser",
			{id:id,locked:locked},
			function(result){
				if(result){
					//修改成功以后，修改按钮的数据
					obj.value= (locked==0?"正常":"锁定");//修改展示的数据
					
					if(locked==0){
						//如果不是热门
						$(obj).attr("class","btn btn-success")
					}else{
						//如果是热门
						$(obj).attr("class","btn btn-danger")
					}
				}
			}
		)
	}
	
	//根据用户名模糊和状态查询
	function query(){
		//获取form表单中搜索的条件数据
		var data = $("form").serialize();
		
		//查询数据
		$("#center").load("/admin/users?"+ data);
	}

</script>
</html>